﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <p>
        1:闭包的概念：
            如果一个函数访问了他的外部变量，那么他就是个闭包!
            当函数a的内部函数b被函数a内，函数b外的一个变量引用的时候，就创建了一个闭包   
    </p>
    <p>
        2:闭包的意义：
        闭包总是用于创建含有隐藏数据的函数(不全部是这样)
        闭包就是函数外部可以访问函数内部的变量
        缓存一个大的对象
    </p>
    <p>
        3:闭包的缺点：
        闭包太多,不容易释放内存
    </p>
    <p>
        4:垃圾回收机制
        找到那些不再继续使用的变量，然后释放掉其所占用的内存，垃圾回收机制会按照固定的时间间隔，周期性的执行这一操作.
        函数内部的局部变量，执行函数的时候会为这些局部变量开辟内存空间，直到函数运行结束，就释放掉所有的变量.
    </p>

    设置间隔时间:
    <input type="text" id="txt1" />
    <input type="button" id="btn1" value="开始" onclick="append({ count: 1, name: '张三' });" />
    <input type="button" id="btn2" value="暂停" onclick="stop();" />
    <input type="button" id="btn3" value="继续" onclick="append({ count: 1, name: '张三' });" />
    <div id="container">
    </div>
</body>
</html>
<script>

    al1();
    al2();
    function al1()
    {
        alert(1);
    }
    var al2 = function () {
        alert(2);
    }

    var getID = (function () {
        var id = 1;
        return function () {
            return id++;
        }
    })();

    var sid = 0;
    function append(obj) {
        var ids = getID();
        var html = document.createElement("div");
        html.id = ids;
        html.innerHTML = obj.name + "--" + obj.count++;
        html.style.border = "1px solid red";
        html.style.width = "200px";
        html.style.height = "20px";
        html.style.marginTop = "2px";
        html.setAttribute("tag", "1");
        document.getElementById("container").appendChild(html);

        var args = arguments.callee;
        sid = window.setTimeout(function () {
            args(obj);
        }, parseInt(document.getElementById("txt1").value) * 1000);
    }

    function stop() {
        window.clearTimeout(sid);
    }

    doEventAll();

    function doEventAll()
    {
        document.getElementById("container").onclick = function (e) {
            var o = null;
            if (e.srcElement) {
                var o = e.srcElement 
            }
            else {
                var o = e.target;
            }
            if (o.tagName.toLowerCase() == "div" && o.getAttribute("tag") == "1") {
                o.onclick = function () {
                    alert(this.id);
                }
            }
        }
    }
    
    var res = [];
    function fn() {
        for (var i = 0; i < 3; i++) {
            res[i] = (function (k) {
                return function () {
                    return k;
                }
            })(i);
        }
    }
    fn();

    console.log(res[0]() + "--" + res[1]() + "--" + res[2]());

    function foo(x) {
        var temp = 3;
        return function (y) {
            return x + y + (++temp);
        }
    }

    var bar = foo(2);
    console.log(bar(10) + "--" + bar(10));

    function add(x) {
        return function (y) {
            return function (z) {
                return x + y + z;
            }
        }
    }
    console.log(add(2)(3)(4));

    var db = (function () {
        var data = {};
        return function (key, val) {
            if (val === undefined) {
                return data[key];
            } else {
                return data[key] = val;
            }
        }
    })();
    console.log(db("x") + "---" + db("x", 1) + "---" + db("x"));


</script>
